<template>
    <div class="task-content-block">
        <h2 class="name">{{data?.name || ''}}</h2>
        <p class="context">{{data?.context || ''}}</p>
        <!-- 作业作答页面需要展示作业附件，作业查看页面不需要 -->
        <div class="task-file-list" v-if="type === 'task-answer' && data.homeworkMaterialList && data.homeworkMaterialList.length">
            <FileItem class="task-file-item" v-for="item in data.homeworkMaterialList" :key="item.materialId" :data="item"/>
        </div>
        <el-divider class="divider-line"></el-divider>
    </div>
</template>

<script setup>
import FileItem from './file-item.vue';

const props = defineProps({
    data: {
        type: Object,
        default: () => {}
    },
    type: { // 作业类型 task-view 查看作业 task-answer 作业作答
        type: String,
        default: 'task-view'
    }
})
</script>

<style lang="scss" scoped>
.task-content-block {
    font-family: MicrosoftYaHei;
    color: var(--srt-main-text-color);
    .name {
        font-size: 16px;
        font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
        font-weight: bold;
        line-height: 16px;
        word-break: break-all;
    }
    .context {
        font-size: 14px;
        line-height: 21px;
        margin-top: 16px;
        word-break: break-all;
    }
    .divider-line {
        border-top: 1px solid #E0E2E4;
        margin: 30px 0;
    }
    .task-file-list {
            margin-top: 20px;
            display: flex;
            flex-wrap: wrap;
            margin-bottom: -20px;
            .task-file-item {
                width: 480px;
                margin-right: 20px;
                margin-bottom: 20px;
            }
        }
}
</style>